<template>
  <div>
    <div
      style="position: fixed; top: 0; left: 0; width: 100%; z-index: 100000000"
    >
      <form action="/">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
          @cancel="onCancel"
        />
      </form>
    </div>
    <div style="display: flex; margin-top: 60px">
      <van-sidebar
        v-model="activeKey"
        style="overflow-y: scroll; height: 617px"
      >
        <van-sidebar-item v-for="item in list" :key="item.id">
          <div
            slot="title"
            style="
              padding-left:10px
              width: 74px;
              height: 57px;
              text-aline: center;
              line-height: 57px;
            "
            @click="changeImg(item.id)"
          >
            {{ item.name }}
          </div>
        </van-sidebar-item>
      </van-sidebar>
      <div class="imgfather">
        <div
          v-for="jx in jxtj"
          :key="jx.id"
          class="photofather"
          @click="toBuy(jx.productItem)"
        >
          <div style="height: 140 px">
            <img :src="jx.href" class="photo" />
            <span style="font-size: 12px">{{ jx.productItem }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import { Sidebar, SidebarItem, Toast } from "vant";
import uri from "@/config/uri";
//引入搜索框
import { Search } from "vant";
//

Vue.use(Search);
Vue.use(Sidebar);
Vue.use(SidebarItem);
export default {
  data() {
    return {
      activeKey: 0,
      value: "",
      list: [],
      jxtj: [],
    };
  },
  methods: {
    changeImg(ret) {
      console.log(ret % 3);
      if (ret % 3 === 1) {
        this.jxtj = [];
        this.$http.get(uri.getFenlei).then((ret) => {
          console.log(ret.data);
          this.jxtj = ret.data;
        });
      } else if (ret % 3 === 2) {
        this.jxtj = [];
        this.$http.get(uri.getNvzhuang).then((ret) => {
          //  console.log(ret);
          this.jxtj = ret.data;
        });
      }
      if (ret % 3 === 0) {
        this.jxtj = [];
        this.$http.get(uri.getNanzhuang).then((ret) => {
          //  console.log(ret);
          this.jxtj = ret.data;
        });
      }
    },
    onSearch(val) {
      Toast(val);
    },
    onCancel() {
      Toast("取消");
    },
    toBuy(tit) {
      this.$router.push("/CategoryBuy/" + tit);
    },
  },
  async mounted() {
    //    console.log(this.$http);
    this.$http.get(uri.getTuijian).then((ret) => {
      //  console.log(ret);
      this.list = ret.data;
    });
    this.$http.get(uri.getFenlei).then((ret) => {
      // console.log(ret);
      this.jxtj = ret.data;
    });
  },
};
</script>
<style scoped>
.photo {
  width: 67px;
  height: 67px;
  display: block;
}
.imgfather {
  display: flex;
  width: 291px;
  flex-wrap: wrap;
  margin-left: 84px;
}
.photofather {
  width: 87px;
  height: 150px;
  text-align: center;
}
.van-sidebar-item {
  padding: 0;
}
.van-sidebar-item--select {
  color: orangered;
}
.van-sidebar-item--select::before {
  background-color: #ffffff;
}
.van-sidebar {
  position: fixed;
  top: 60px;
  left: 0;
}
</style>